<template>
    <div class="ywsl">
        <div class="title"></div>
        <div class="cnt">
            <ul>
                <li v-for="item in ywArr">
                    <img :src="item.icon">
                    <p class="name">{{item.name}}</p>
                    <p class="num">{{ywData[item.key] || 0}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "ywsl",
    props: {
        ywData: {
            type: Object,
            default: () => ({
                ywl: 291,
                bll: 167,
                pdsc: 14,
                ddl: "80.95%"
            })
        }
    },
    data() {
        return {
            ywArr: [
                {
                    icon: require("@/assets/home/yw1.png"),
                    name: "当周收件总量",
                    key: "weekNum"
                },
                {
                    icon: require("@/assets/home/yw2.png"),
                    name: "窗口端收件量",
                    key: "windowNum"
                },
                {
                    icon: require("@/assets/home/yw3.png"),
                    name: "其他收件量",
                    key: "otherNum",
                },
                {
                    icon: require("@/assets/home/yw4.png"),
                    name: "当周“一网通办”收件率",
                    key: "weekMatterRate"
                },
                {
                    icon: require("@/assets/home/yw4.png"),
                    name: "当月“一网通办”收件率",
                    key: "monthMatterRate"
                },
            ],
        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.ywsl{
    margin-top: 22px;
}
.title{
    width: 450px;
    height: 48px;
    background: url("~@/assets/home/left3.png") no-repeat;
    background-size: 100% 100%;
}
.cnt{
    margin-top: 19px;
    padding-left: 32px;
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 124px;
            margin-right: 10px;
            &:nth-child(3){
                margin-right: 0;
            }
            &:nth-child(4){
              width: 191px;
            }
            &:nth-child(5){
                width: 191px;
                margin-right: 0;
            }
            img{
                width: 75px;
                height: 66px;
            }
            .right{
                padding-top: 4px;
                margin-left: 8px;
            }
            p{
                color: rgba(211, 229, 255, 1);
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
            }
            .name{
                margin-top: -2px;
            }
            .num{
                background: linear-gradient(180deg, rgba(9, 165, 255, 0) 33.91%, rgba(9, 165, 255, 1) 100%), rgba(247, 255, 253, 1);
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent;
                font-family: "Source Han Sans CN";
                font-weight: 500;
                font-size: 20px;
                line-height: 30px;
            }
        }
    }
}
</style>